import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import styles from "./index.module.scss";

const allGrades = ["小班上", "小班下", "中班上", "中班下", "大班上", "大班下"];

// 活动类型
type ActivityType = "学习活动" | "日常健康活动";

// 活动项类型
type ActivityItem = {
  id: number;
  title: string;
  type: "article" | "video-article"; // article: 纯文章, video-article: 视频+文章
  items?: string[]; // 子项列表
};

// 示例数据
const sampleActivities: Record<string, ActivityItem[]> = {
  小班下: [
    {
      id: 1,
      title: "玩玩乐",
      type: "article",
      items: ["主题解析", "主题脉络图", "环境创设", "家园共育", "主题活动一览表", "糖果大集合", "甜甜的糖水", "开心跳跳糖", "我是棉花糖"],
    },
  ],
  小班上: [
    {
      id: 7,
      title: "我上幼儿园",
      type: "article",
      items: ["主题解析", "主题脉络图", "环境创设", "家园共育"],
    },
  ],
  中班上: [],
  中班下: [],
  大班上: [],
  大班下: [],
};

// 定义哪些项应该跳转到文章页面（前5项）
const articleItems = ["主题解析", "主题脉络图", "环境创设", "家园共育", "主题活动一览表"];

// 定义哪些项应该跳转到视频+文章页面（后4项）
const videoArticleItems = ["糖果大集合", "甜甜的糖水", "开心跳跳糖", "我是棉花糖"];

const ChildDevelopmentPage = () => {
  const [activeTab, setActiveTab] = useState<ActivityType>("学习活动");
  const [selectedGrade, setSelectedGrade] = useState("小班下");
  const navigate = useNavigate();

  useEffect(() => {
    document.title = "儿童发展平台 · 伊克昭儿童在线";
  }, []);

  const currentActivities = sampleActivities[selectedGrade] || [];

  const handleActivityItemClick = (activity: ActivityItem, item: string, e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发活动卡片的点击
    
    // 判断跳转到哪个页面
    if (articleItems.includes(item)) {
      // 跳转到文章页面
      navigate(`/child-development/article?title=${encodeURIComponent(item)}&grade=${encodeURIComponent(selectedGrade)}&activityTitle=${encodeURIComponent(activity.title)}`);
    } else if (videoArticleItems.includes(item)) {
      // 跳转到视频+文章页面
      navigate(`/child-development/video-article?title=${encodeURIComponent(item)}&grade=${encodeURIComponent(selectedGrade)}&activityTitle=${encodeURIComponent(activity.title)}`);
    }
  };

  return (
    <div className={styles.page}>
      {/* 顶部导航栏 */}
      <header className={styles.topbar}>
        <Link to="/" aria-label="关闭" className={styles.close}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
            <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
          </svg>
        </Link>
        <div className={styles.tabs}>
          <button
            className={`${styles.tab} ${activeTab === "学习活动" ? styles.tabActive : ""}`}
            onClick={() => setActiveTab("学习活动")}
          >
            学习活动
          </button>
          <button
            className={`${styles.tab} ${activeTab === "日常健康活动" ? styles.tabActive : ""}`}
            onClick={() => setActiveTab("日常健康活动")}
          >
            日常健康活动
          </button>
        </div>
      </header>

      <div className={styles.content}>
        {/* 左侧导航面板 */}
        <aside className={styles.sidebar}>
          <nav className={styles.gradeNav}>
            {allGrades.map((grade) => (
              <button
                key={grade}
                className={`${styles.gradeItem} ${selectedGrade === grade ? styles.gradeItemActive : ""}`}
                onClick={() => setSelectedGrade(grade)}
              >
                {grade}
              </button>
            ))}
          </nav>
        </aside>

        {/* 右侧主内容区 */}
        <main className={styles.main}>
          {currentActivities.length === 0 ? (
            <div className={styles.empty}>暂无活动内容</div>
          ) : (
            <div className={styles.activityList}>
              {currentActivities.map((activity) => (
                <div
                  key={activity.id}
                  className={styles.activityCard}
                >
                  <div className={styles.activityTitle}>{activity.title}</div>
                  {activity.items && activity.items.length > 0 && (
                    <ul className={styles.activityItems}>
                      {activity.items.map((item, index) => (
                        <li 
                          key={index} 
                          className={styles.activityItem}
                          onClick={(e) => handleActivityItemClick(activity, item, e)}
                        >
                          {item}
                        </li>
                      ))}
                    </ul>
                  )}
                </div>
              ))}
            </div>
          )}
        </main>
      </div>
    </div>
  );
};

export default ChildDevelopmentPage;
